import React, { useState } from 'react'
import { Input, Button, message } from 'antd'

import { userLogin } from '../../api/login'

import './index.scss'

function LoginC (props: any) {
    // 网页跳转

    // 用户所有信息
    const [userMsg, setuserMsg] = useState({
        username: '',
        passwords: '',
        iphonenum: ''
    })
    // 登录按钮
    const [btnLoading, setBtnLoading] = useState(false)

// ===========================================================================================
    // 打开注册页面
    const Unlogin = () => {
        const res = props.undateDisplayUnlogin
        res()
        
    }
    // 登陆函数和应用
    const login = async() => {
        setBtnLoading(true)
        try {
            const res = await userLogin(userMsg)
            console.log(res);
            if (res.data.massage) {
                message.success('登陆成功')
                setBtnLoading(false)
            } else {
                message.error('登录失败，用户信息填写错误');
                setBtnLoading(false)
            }
            
            
        } catch (error) {
            message.error('服务器异常');
            setBtnLoading(false)
            console.log(error);
            
        }
    }
    const loginBtn = () => {
        login()
    }
    const keyupLoginBtn = (e: any) => {
        if (e.keyCode === 13) {
            login()
        }
    }
    // change事件
    const numberChange = (e: any): void => {
        // const res = /^[[0-9A-Za-z]]$/
        const res = /^[0-9]*$/
        const { value } = e.target
        if (res.test(value) && value.length<=13) {
            setuserMsg({
                ...userMsg,
                iphonenum: value
            })
        }
    }
    const userNameChange = (e: any): void => {
        // const res = /^[[0-9A-Za-z]]$/
        const res = /^[a-z0-9A-Z]*$/
        const { value } = e.target
        if (res.test(value) && value.length<=13) {
            setuserMsg({
                ...userMsg,
                username: value
            })
        }
    }
    const passwordChange = (e: any): void => {
        // const res = /^[[0-9A-Za-z]]$/
        const res = /^[a-z0-9A-Z]*$/
        const { value } = e.target
        if (res.test(value) && value.length<=13) {
            setuserMsg({
                ...userMsg,
                passwords: value
            })
        }
    }


    return (
        <div className="loginc-index">
            <div className="loginc-number-div">
                <Input 
                className="loginc-number-ipt loginc-ipt-all"
                placeholder="请输入手机号"
                value={ userMsg.iphonenum }
                onChange={numberChange}
                onKeyUp={ keyupLoginBtn }
                ></Input>
            </div>
            <div className="loginc-username-div">
                <Input 
                className="loginc-username-ipt loginc-ipt-all"
                placeholder="请输入账号"
                value={ userMsg.username }
                onChange={userNameChange}
                onKeyUp={ keyupLoginBtn }
                ></Input>
            </div>
            <div className="loginc-password-div">
                <Input.Password
                className="loginc-password-ipt loginc-ipt-all"
                placeholder="请输入密码"
                value={ userMsg.passwords }
                onChange={passwordChange}
                onKeyUp={ keyupLoginBtn }
                ></Input.Password>
            </div>
            <div className="loginc-btn-div">
                <Button 
                className="loginc-btn-all 
                loginc-login-btn" 
                onClick={ loginBtn } 
                loading= {btnLoading}
                >登录</Button>
                <Button
                 className="loginc-btn-all loginc-unlogin-btn"
                 onClick={ Unlogin }
                 >注册</Button>
            </div>
        </div>
    )
}


export default LoginC